<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>product-detail</title>
    <link rel="stylesheet" type="text/css" href="css/css1.css"/>
    <script src="https://cdn.bootcss.com/headroom/0.9.4/angular.headroom.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.js"></script>
    <script src="resource/ply/Ply.min.js"></script>
    <link rel="stylesheet" href="resource/ply/ply.css">
</head>
<body>

<div id="app-gd">
    <div class="top">
        <div class="top-list">
            <div class="top-left" v-show="!isLogin">
                <a href="#"><span>雷猴~</span></a>
                <a href="login.html"><span>[请登录]</span></a>
                <a href="register.html"><span>[注册]</span></a>
            </div>
            <div class="top-right">
                <a href="user-center.html" v-show="isLogin"><span>{{ nickname }}</span></a>
                <a href="javascript:void(0)"><span style="cursor: pointer" @click="quitLogin" v-show="isLogin">[退出]</span></a>
                <a href="user-order.html"><span>我的订单</span></a>
                <a href="user-collect.html"><span>我的收藏</span></a>
            </div>
        </div>
    </div>
    <!--首页-->
    <div class="head-logo">
        <div class="head-inner">
            <!--logo-->
            <div class="header-logo">
                <a href="index.html"><img src="images/logo.png" alt="乐鲜生活" height="80"/></a>
            </div>
            <!--购物车-->
            <div class="buyCar">
                <a href="buy-cart.html">
                    <span class="shopping-bag-icon"></span>
                </a>
            </div>
            <div class="header-search">
                <!--搜索框-->
                <div class="search-form">
                    <input type="text" name="search-content" class="header-search-input" maxlength="100"
                           placeholder="搜一哈你想搜的内容" v-model="searchContent"/>
                    <a @click="search" class="header-search-button">
                        <span class="header-search-icon"></span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="header-nav">
        <div class="first-category">
            <ul class="first-category-ul">
                <li v-for="(item,index) in primaryCategory" @click="onPrimCateClick(index)" class="first-category-item">
                    <span>{{item.name}}</span>
                </li>

            </ul>

        </div>
    </div>
    <div class="center-content">
        <!--路径导航-->
        <div class="nav-path">

        </div>
        <!--中心-->
        <div class="main">
            <!--左边-->
            <div class="pro-left">
                <img :src="good_info.image_main" alt="detail"/>
            </div>

            <!--右边-->
            <div class="pro-right">
                <h1>{{good_info.goods_name}}</h1>
                <div class="line"></div>
                <p class="market-price">
                    <span class="title">吊牌价:</span>
                    <span class="price">￥{{good_info.price}}</span>
                </p>
                <p>
                    <span>门 店：</span>
                    <span>{{good_info.store_name}}</span></p>
                <div class="line"></div>
                <div class="trade-content">
                    <div class="type-chose">
                        <div class="chose-class">
                            <span class="pull-left">类&nbsp;&nbsp;别：</span>
                            <div class="choseClass">
                                <ul>
                                    <li class="chose-item">
                                        <div class="chose-img-list">
                                            <img src="images/pro-detail/1.jpg" alt="" width="25"/>
                                        </div>
                                    </li>
                                    <li class="chose-item">
                                        <div class="chose-img-list">
                                            <img src="images/pro-detail/1.jpg" alt="" width="25"/>
                                        </div>
                                    </li>
                                    <li class="chose-item">
                                        <div class="chose-img-list">
                                            <img src="images/pro-detail/1.jpg" alt="" width="25"/>
                                        </div>
                                    </li>
                                    <li class="chose-item">
                                        <div class="chose-img-list">
                                            <img src="images/pro-detail/1.jpg" alt="" width="25"/>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="chose-cout">
                            <span class="pull-left">数&nbsp;&nbsp;量：</span>
                            <div class="num-wrapper">
                                            <span class="minus-plus pull-left">
                                                <span class="minus" @click="changeNumToBuy(-1)"></span>
                                            </span>
                                <span id="num" class="num pull-left">{{numToBuy}}</span>
                                <span class="minus-plus pull-left">
                                                <span class="plus" @click="changeNumToBuy(1)"></span>
                                            </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="line"></div>

                <span @click="addToCart" class="buy-btn add-to-cart">
                                <img src="images/pro-detail/buycart.png"/>
                                <span>加入购物车</span>
                            </span>

                <span id="collect-product" class="collect-product" @click="collect">
                                <img src="images/pro-detail/collect.png"/>
                                <span title="collect">收藏商品</span>
                            </span>
                <div class="share-row">
                    <span class="title pull-left">分&nbsp;&nbsp;享：</span>
                    <span>
                                    <i class="qzone pull-left" title="分享到QQ空间"></i>
                                    <i class="weixin pull-left" title="分享到朋友圈"></i>
                                    <i class="weibo pull-left" title="分享到新浪微博"></i>
                                    <i class="qq pull-left" title="分享给QQ好友"></i>
                                </span>
                </div>


            </div>
        </div>

        <div class="total-content">
            <div class="product-content">
                <p class="des-title">商品信息</p>
                <div>{{good_info.description}}</div>
                <div id="pro-description" class="description-content"></div>
            </div>
        </div>
    </div>
</div>

<!--数量控制-->
<!-- <script>
    var count = parseInt(document.getElementById("num").innerText);
    function minus() {
        if(!(count == 1)){
            count--;
            document.getElementById("num").innerText = count.toString();
        }
    }
    function plus() {
        if(!(count == 5)){
            count++;
            document.getElementById("num").innerText = count.toString();
        }
    }
</script> -->

<!--收藏-->
<!-- <script>
    var Collect = false;
    function collect() {
        if(Collect != true){
            document.querySelector("span[title]").innerText = "已收藏";
            document.getElementsByClassName("collect-product")[0].getElementsByTagName("img")[0].setAttribute("src","images/pro-detail/not-collect.png");
            Collect = true;
        }
        else{
            document.querySelector("span[title]").innerText = "收藏商品";
            document.getElementsByClassName("collect-product")[0].getElementsByTagName("img")[0].setAttribute("src","images/pro-detail/collect.png");
            Collect = false;
        }
    }
</script> -->
</body>
<script src="js/goodDetail.js"></script>
</html>